<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue_demo2</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<h1>vue_demo3</h1>
<hr/>
<div id="app-1">
    <div v-test="color">
        {{msg}}
    </div>
</div>
<button onclick="unbindApp()">解绑</button>

<div id="app-2">
    <template id="temp2">
        <h2 style="color: red">template模板标签</h2>
    </template>
    <template id="temp3">
        <h2 style="color: green">template模板标签</h2>
    </template>
</div>

<div id="app-3">
    <children1>
        <span>123</span>
    </children1>
</div>

<div id="app-4">
    <children2>
        <span slot="first" @click="todo">first</span>
        <span slot="second">second</span>
    </children2>
</div>

<div id="app-5">
    <tb-list v-bind:data="mydata">
        <template slot-scope="scope">
            <p>{{JSON.stringify(scope)}}</p>
            <p>{{scope.$index}}</p>
            <p>{{scope.row.name}}</p>
            <p>{{scope.row.age}}</p>
            <p>{{scope.row.sex}}</p>
        </template>
    </tb-list>
</div>
<script>
    function unbindApp() {
        app1.$destroy();
    }

    Vue.directive("test", {
        bind: function (el, binding, vnode) {
            console.log("1-bind 被绑定");
            console.log("el:", el);
            console.log("binding:", binding);
            console.log("vnode:", vnode);
            el.style.color = binding.value;
        }
    });

    var app1 = new Vue({
        el: '#app-1',
        data: {
            msg: 123,
            color: 'red'
        }
    });

    var app2 = new Vue({
        el: '#app-2',
        template: '#temp2'
    });

    var app3 = new Vue({
        el: '#app-3',
        components: {
            children1: {
                template: "<button><slot></slot>单个插槽</button>"
            }
        }
    });

    var app4 = new Vue({
        el: '#app-4',
        methods: {
            todo: function () {
                console.log("to do sth");
            }
        },
        components: {
            children2: {
                template: "<button><slot name='first'></slot>具名插槽<slot name='second'></slot></button>"
            }
        }
    });

    var app5 = new Vue({
        el: '#app-5',
        data: {
            mydata: [
                {
                    name: 'name1',
                    age: 20,
                    sex: 'man'
                }
            ]
        },
        components: {
            'tb-list': {
                template: '<ul><li v-for="(item, index) in data"><slot v-bind:row="item" v-bind:$index="index"></slot></li></ul>',
                props: ['data']
            }
        }
    });
</script>
</body>
</html>